<template>
  <div class="help">
    <ul>
      <li ref="tab1" @click.stop.passive="runToLink(104,'http://unicomvideo.ping-qu.com/wap/video_list?jiangxi')"></li>
      <li ref="tab2" @click.stop.passive="runToLink(105,'https://zhidao.10010.com:5007/unicomkbs/WoIntf/login?ticket=&location=&channelcode=1202&provincecode=360000')"></li>
      <li ref="tab3" @click.stop.passive="runToLink(106,'http://wxjx.unisk.cn/pages/2018/wxjx/jxzxkf/index.html')"></li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      key: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initAnimated();
    })
  },
  methods: {
    //跳转
    runToLink(id, url) {
      tongJi(id).then(rs => {
        location.href = url;
      })
    },
    initAnimated() {
      //按钮的动画
      Velocity(document.querySelectorAll('.checkgroup'),
        {
          opacity: 1
        },
        {
          duration: '1500',
          easing: "swing",
          delay: 1500
        })
      // tabs的动画
      Velocity(this.$refs.tab1,
        {
          left: '0rem',
          opacity: 1
        },
        {
          duration: '1500',
          easing: [250, 15],
          delay: false
        })
      // tab2
      Velocity(this.$refs.tab2,
        {
          right: '0rem',
          opacity: 1
        },
        {
          duration: '1500',
          easing: [250, 15],
          delay: 500
        })
      // tab3
      Velocity(this.$refs.tab3,
        {
          left: '0rem',
          opacity: 1
        },
        {
          duration: '1500',
          easing: [250, 15],
          delay: 1000
        })

    }
  },
}
</script>

<style lang="less" scoped>
.help {
  ul {
    overflow: hidden;
    li {
      margin: 15px auto;
      position: relative;
      opacity: 0;
    }
    li:nth-child(1) {
      left: -640px;
      width: 640px;
      height: 240px;
      background: url("../../assets/img/help-btns.png") no-repeat 0 -10px;
      background-size: 640px 758px;
    }
    li:nth-child(2) {
      right: -640px;
      width: 640px;
      height: 240px;
      background: url("../../assets/img/help-btns.png") no-repeat 0 -2.65rem;
      background-size: 640px 758px;
    }
    li:nth-child(3) {
      left: -640px;
      width: 640px;
      height: 240px;
      background: url("../../assets/img/help-btns.png") no-repeat 0 -5.2rem;
      background-size: 640px 758px;
    }
  }
}
</style>
